<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dojo, javascript, integration, numeric, input control, fubar_perl" />
<meta name="description" content="Numeric input control using a simple javascript program and Dojo integration!" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="distribution" content="Global" />
<meta name="author" content="Dwight Vietzke" />
<meta http-equiv="Reply-to" content="dwight_vietzke@yahoo.com" />
<meta name="classification" content="mobile internet website software" />
<meta name="copyright" content="Copyright©2008-2009 - OpenSiteMobile" />

        <title>Numeric Control</title>

<script type="text/javascript" charset='utf-8' src="./msos/dojo_config.js"></script>
<script type="text/javascript" charset='utf-8' src="./dojo/dojo.js"></script>

<script type='text/javascript'>
/* <![CDATA[ */

dojo.require("msos.common");
dojo.require("msos.number_ctrl");

function init_numeric_ctrl() {

	// Test browser basics
	if (!msos.common.browser_current()) return false;

        // Identify the input element to add numeric controls to
        var input_el = dojo.byId('input_quantity')

	// Generate our numeric input control
	var num_ctrl;
	num_ctrl = new msos.number_ctrl.tool(input_el);
	num_ctrl.num_min_val = 0;
	num_ctrl.num_max_val = 10;
	num_ctrl.num_ctrl_left = -4;
	num_ctrl.num_ctrl_top = -1;
	num_ctrl.num_ctrl_id = 'quantity';
	num_ctrl.after_change_function = function() { window.status = 'Quan. input: ' + input_el.value; }
	num_ctrl.generate_num_ctrl();

	// This section is useful for testing and demo purposes.
	var config_ul = dojo.byId('configuration');
	config_ul.innerHTML = '';	// Clear na ref (for valid xhtml)
	for (var parm in djConfig) {
	    if (typeof(djConfig[parm]) == 'boolean') {
		var list_elm   = document.createElement("li");
		var inpt_elm_t = document.createElement("input");
		var inpt_elm_f = document.createElement("input");
		inpt_elm_t.type = "radio";
		inpt_elm_f.type = "radio";
		inpt_elm_t.name = parm;
		inpt_elm_f.name = parm;
		inpt_elm_t.value = 'true';
		inpt_elm_f.value = 'false';
		if (djConfig[parm])	inpt_elm_t.checked = true;
		else			inpt_elm_f.checked = true;
		var true_txt = document.createTextNode('T ');
		var list_txt = document.createTextNode('F ' + parm); 
		list_elm.appendChild(inpt_elm_t);
		list_elm.appendChild(true_txt);
		list_elm.appendChild(inpt_elm_f);
		list_elm.appendChild(list_txt);
		config_ul.appendChild(list_elm);
	    }
	}

        return true;
}

// Start our numeric control demo page
dojo.addOnLoad(init_numeric_ctrl);

/* ]]> */
</script>

<link rel="stylesheet" type='text/css' charset='utf-8' href="./msos/style/fubar.css" media='screen, handheld' />
<link rel='shortcut icon' href='./msos/images/osm.ico' />
</head>
<body>

<div id='body'>

<div class='marquee'>
    <img id='osm_logo_small' src='./msos/images/osm_logo_sml.jpg' class='marquee_img' alt="OpenSiteMobile" />
</div>

<div class='header'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<h1>Numeric Input Control</h1>

<table id='numeric_ctrl_table' style='border:2px outset; width:120px;'>
	<tr>
	  <td class='text_rt' title='Enter a quantity'>Quantity: </td>
	  <td class='text_lt'><input type="text" id="input_quantity" style="width:20px" value='1' /></td>
	</tr>
</table>

<h3>Configuration settings:</h3>

<div class='list_small'>
        <ul>
                <li>min -> 0,</li>
                <li>max -> 10,</li>
                <li>start -> 1 (see input value),</li>
                <li>allow blank -> true (default)</li>
        </ul>
</div>

<noscript>
<h2><span class='alert'>Your browser&#39;s JavaScript compiler is turned off or isn&#39;t available.</span></h2>

<p>This page requires that Javascript be enabled in order to function properly!</p>
</noscript>

<div class='pgrph_sml'>
  The above input is used to demo our "Numeric input control" widget.
</div>

<h3>Page Debugging</h3>

<form accept-charset='utf-8' action='numeric_ctrl.html' method='get'>
<div class='list_large'>

<ul id='configuration'><li>Not Available</li></ul>

<input type="submit" value="Reload Page" />

</div>
</form>

<h3>Reference:</h3>

<div class='list_small'>
<ul>
    <li><a href='./msos/common.js'>msos.common</a></li>
    <li><a href='./msos/number_ctrl.js'>msos.number_ctrl</a></li>
</ul>
</div>

<h3 title='Testing utf-8 encoded characters'>Iñtërnâtiônàlizætiøn</h3>

<div class='footer'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<div id='copyright'>
<span class='no_br'>Powered by:
   <a href='http://www.opensitemobile.com'>
  <span class='bold_text' title="Copyright©2008-2009 OpenSiteMobile - All rights reserved">MobileSiteOS</span></a>™</span>
</div>

</div> <!-- end 'body' div -->

</body>
</html>
